<!-- 备份 -->
<template>
  <div class="smoothness-animation-home">
    <img
      class="smoothness-animation-img"
      src="../../assets/smoothness-animation-bg.png"
      alt=""
    >
    <div class="fixed-top-box">
      <TopBar
        class="fixed-top-bar"
        :config="TopBarConfig"
        :gobackBool="gobackBool">
      </TopBar>
    </div>
    <div class="smoothness-animation-placeholder">

    </div>
    <div style="position: relative;height: 0.48rem;">
      <div
        class="my-tab-class"
        ref="move"
        :class="{'fixed-scroll-class':fixedScrollClass}">
        <!-- <MyTab :config="MyTabConfig" @myTabActive="myTabActive"></MyTab> -->

        <van-dropdown-menu active-color="#2E90FF">
          <van-dropdown-item
            v-model="value1"
            :options="option1"
            @open="scrollToTop"
          />
          <van-dropdown-item
            v-model="value2"
            :options="option2"
            @open="scrollToTop"
          />
        </van-dropdown-menu>


        <!-- <div class="smoothness-animation-operate">
          <button @click="scrollToPage">操作{{ flag }}</button>
          <button @click="filtrate">筛选</button>
        </div> -->
      </div>
    </div>
    <div class="smoothness-animation" ref="content_ref">
        <div class="smoothness-animation-main" id="section_1">
          <div
            class="smoothness-animation-item"
            v-for="item in list1"
            :key="item.id">
            {{ item.name }}
          </div>
        </div>

        <div class="smoothness-animation-main" id="section_2">
          <div
            class="smoothness-animation-item"
            v-for="item in list2"
            :key="item.id">
            {{ item.name }}
          </div>
        </div>

        <div class="smoothness-animation-main" id="section_3">
          <div
            class="smoothness-animation-item"
            v-for="item in list3"
            :key="item.id">
            {{ item.name }}
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import TopBar from '@com/topBar/index.vue'
import MyTab from '@com/myTab/index.vue'
export default{
  components:{ TopBar,MyTab },
  data(){
    return{
      TopBarConfig:{
        title:'激励商城',
        seek:'',
        mainBool:true
      },
      gobackBool:false,
      list1:[
        { name:'未开始',id:1 },
        { name:'未开始',id:2 },
        { name:'未开始',id:3 },
        { name:'未开始',id:4 },
        { name:'未开始',id:5 },
        { name:'未开始',id:6 },
        { name:'未开始',id:7 },
      ],
      list2:[
        { name:'已完成',id:1 },
        { name:'已完成',id:2 },
        { name:'已完成',id:3 },
        { name:'已完成',id:4 },
        { name:'已完成',id:5 },
        { name:'已完成',id:6 },
        { name:'已完成',id:7 },
      ],
      list3:[
        { name:'进行中',id:1 },
        { name:'进行中',id:2 },
        { name:'进行中',id:3 },
        { name:'进行中',id:4 },
        { name:'进行中',id:5 },
        { name:'进行中',id:6 },
        { name:'进行中',id:7 },
      ],
      MyTabConfig:{
        direction:'transverse'
      },
      czDomTop:0,
      activeNav: null,
      fixedScrollClass:false,
      flag:1,
      scrollTop:0,//滚动过程中他变了?

      value1: 0,
      value2: 'a',
      option1: [
        { text: '默认顺序', value: 0 },
        { text: '兑换积分从低到高', value: 1 },
        { text: '兑换积分从高到低', value: 2 },
      ],
      option2: [
        { text: '全部积分', value: 'a' },
        { text: '1-100', value: 'b' },
        { text: '101-1000', value: 'c' },
        { text: '1000以上', value: 'd' },
      ],

    }
  },
  created(){
  },
  mounted(){
    // 1.点击操作按钮移动的位置
    this.czDomTop = this.$refs.move.getBoundingClientRect().top -44
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    this.$nextTick(
      () => {
        // 监听页面滚动事件
        window.addEventListener('scroll', this.onScroll)
      }
    )
  },
  methods:{
    // 平滑滚动到指定位置
    scrollToPage(){
      console.log('-----');
      let scrollOptions = {
        left: 0,
        top: this.czDomTop,
        behavior:'smooth'
      }
      window.scrollTo(scrollOptions);
    },
    filtrate(){
      setTimeout(() => {
        this.list1 = this.list2 = this.list3 = [
          { name:'跟新数据',id:1 },
          { name:'跟新数据',id:2 },
          { name:'跟新数据',id:3 },
          { name:'跟新数据',id:4 },
          { name:'跟新数据',id:5 },
          { name:'跟新数据',id:6 },
          { name:'跟新数据',id:7 },
        ]
      },1000)
    },
    scrollToTop() {
      let content_ref = (this.$refs.content_ref);
      let scrollIntoViewOptions = {
        block: 'start',//[可选] "start"（顶部），"center"（居中），"end"（尾部） 或"nearest"。默认为"center"。
        behavior: 'smooth',//[可选]定义过渡动画。"auto","instant"或"smooth"。默认为"auto"。
        // inline：[可选] "start"，"center"，"end"或"nearest"。默认为"nearest"。
      };
      content_ref.scrollIntoView(scrollIntoViewOptions);
    },
    myTabActive(query){
      // 转换文字与索引方便操作列表
      let index
      if(query.text === '未开始'){
        index=0
      }else if(query.text === '已完成'){
        index=1
      }else{
        index=2
      }
      // 获取含样式类 class="smoothness-animation-main" 的所有元素，得到一个数组（列表）
      let titleList = document.querySelectorAll('.smoothness-animation-main')
      // offsetTop为元素顶部与整个文档顶部间的距离
      let offsetTop = titleList[index].offsetTop;
      console.log(offsetTop,index);
      // offset为平滑滚动结束后，元素顶部与显示屏顶部间的距离,默认为0，页面滚动到标题触顶
      let offset = 142
      offsetTop -= offset
      // scrollTop为显示屏顶部与整个文档顶部间的距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

      // if(scrollTop){
      //   this.fixedScrollClass = true
      // }

      console.log(scrollTop,'scrollTopscrollTop');

      // 步长（时长500ms，每10ms一跳，共50跳）
      let step = Math.abs(offsetTop-scrollTop) / 50;
      console.log(step,'--------');
      if (offsetTop > scrollTop) {
        // offsetTop > scrollTop 时元素在显示屏下方时，滚动条需下滑
        // scrollTop需增加（offsetTop-scrollTop）
        smoothDown();
      } else {
        // offsetTop < scrollTop 时元素在显示屏上方时，滚动条需上滑
        // scrollTop需减少（scrollTop - offsetTop）
        smoothUp();
      }
      // 向上平滑滚动
      function smoothUp () {
        if (scrollTop > offsetTop) {
          scrollTop -= step;
          document.body.scrollTop = scrollTop;
          document.documentElement.scrollTop = scrollTop;
          setTimeout(smoothUp, 10);
        } else {
          document.body.scrollTop = offsetTop;
          document.documentElement.scrollTop = offsetTop;
        }
      }
      // 向下平滑滚动
      function smoothDown () {
        if (scrollTop < offsetTop) {
          scrollTop += step;
          document.body.scrollTop = scrollTop;
          document.documentElement.scrollTop = scrollTop;
          setTimeout(smoothDown, 10);
        } else {
          document.body.scrollTop = offsetTop;
          document.documentElement.scrollTop = offsetTop;
        }
      }
    },
    // 锚点随页面滚动高亮显示
    // 1.监听页面滚动，实时获取滚动条的位置
    // 2.根据滚动距离，判断第几个目标元素滚动到屏幕中
    // 3.通过动态绑定样式，高亮显示目标元素对应的锚点
    // 页面滚动时触发
    onScroll(){
      // scrollTop为显示屏顶部与整个文档顶部间的距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      // let scrollTop = this.scrollTop
      console.log(scrollTop);
      // 获取含样式类 class="smoothness-animation-main" 的所有元素，得到一个数组（列表）
      let titleList = document.querySelectorAll('.smoothness-animation-main')
      // 将每个目标元素顶部与整个文档顶部的距离，以及显示屏顶部与整个文档顶部间的距离都存入到一个数组中
      let offsetTopList = [ scrollTop ]
      titleList.forEach(item => {
        offsetTopList.push(item.offsetTop)
      })
      console.log(offsetTopList,'titleList',scrollTop,'scrollTop');
      // 对数组进行排序（默认从小到大）
      offsetTopList.sort((a,b) => {
        return a - b;
      })
      console.log(offsetTopList);
      // 当第一个目标元素滚入屏幕后，查询当前滚动的位置在数组中的下标，对应的便是需高亮显示的锚点下标
      if(scrollTop>=offsetTopList[0]){
        this.activeNav = offsetTopList.indexOf(scrollTop)
      }

      // 固定tab切换
      if(scrollTop<211){
        this.fixedScrollClass = false
      }else{
        this.fixedScrollClass = true
      }

      scrollTop>44?this.TopBarConfig.mainBool = false : this.TopBarConfig.mainBool = true
    },

    // 在滚动过程中获取距离上方的距离，每次获取的是变化的，vue中data不会同时变化，所以我一开始就拿到这些代表位置的信息
    getDomTop(){
      // 1.点击操作按钮移动的位置
      this.czDomTop = this.$refs.move.getBoundingClientRect().top - 44
    }
  }
}
</script>

<style lang="scss" scoped>
.smoothness-animation-home{
  .smoothness-animation-img{
    width: 3.75rem;
    height: 2.15rem;
    position: absolute;
    top: 0;
    z-index: -1;
  }
  .fixed-top-box{
    height: 0.44rem;
    position: relative;
    .fixed-top-bar{
      position: fixed;
      top: 0;
      // background-color: aquamarine;
    }
  }
  .smoothness-animation-placeholder{
    width: 3.43rem;
    height: 1.87rem;
    background-color: #fff;
    margin: 0.12rem 0.16rem;
    border-radius: 0.16rem 0.16rem;
    box-shadow: 0.02rem 0.03rem 0.10rem 0.02rem #ecf3f8;
  }
  .my-tab-class{
    position: relative;
  }
  .fixed-scroll-class{
    position: fixed;
    top: 0.44rem;
    width: 100%;
    background-color: #fff;
    // padding-bottom: 0.12rem;
    box-sizing: border-box;
  }
  .smoothness-animation-operate{
    margin: 0.16rem 0.16rem 0.16rem 0.16rem;
  }
  .smoothness-animation{
    overflow: hidden;
    padding: 0 0.16rem;
    box-sizing: border-box;
    .smoothness-animation-main{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .smoothness-animation-item{
          height: 2.66rem;
          width: 1.66rem;
          background: skyblue;
          margin-bottom: 0.16rem;
        }
    }
  }

  // ::v-deep .top-bar .top-bar-title{
  //   color: #fff;
  // }
}
::v-deep .van-dropdown-menu__bar{
  box-shadow:none;
  width: 50%;
  margin: 0 0.16rem;
}
</style>
